<script setup lang="ts">
import { reactive } from 'vue';
import { BaiduMap, BmMarker, BmLabel } from 'baidu-map-vue3'

const state = reactive({
  current: 0,
  show: true,
  list: [
    {
      name: '北京市',
      address: '北京市朝阳区文化新大街1744号',
      point: {
        lng: 116.540071,
        lat: 39.898698
      }
    },
    {
      name: '上海市',
      address: '上海市静安区市北半岛国际中心',
      point: {
        lng: 121.436172,
        lat: 31.295259
      }
    },
    {
      name: '深圳市',
      address: '广东省深圳市南山区卓越前海壹号',
      point: {
        lng: 113.900634,
        lat: 22.528942
      }
    },
    {
      name: '成都市',
      address: '四川省成都市武侯区商鼎国际',
      point: {
        lng: 104.07426,
        lat: 30.62461
      }
    },
    {
      name: '青岛市',
      address: '山东省青岛市黄岛区融合中心',
      point: {
        lng: 120.03140,
        lat: 35.82600
      }
    },
    {
      name: '长沙市',
      address: '湖南省长沙市岳麓区世贸希尔顿大厦',
      point: {
        lng: 112.96537,
        lat: 28.23224
      }
    }
  ]
})
const handleChange = (index: number) => {
  state.current = index
}

</script>
<template>
  <div class="map-wrapper">
    <div class="title tc">
      <span class="item" :class="[state.current === index && 'active']" @click="handleChange(index)"
        v-for="(item, index) in state.list" :key="index">{{ item.name
        }}</span>
    </div>
    <div class="map">
      <baidu-map class="map" ref="map" apiKey="YEUeEzE3TSXymqaFsW7TLdSk4Pl0XWV2"
        :center="state.list[state.current].point" :zoom="16">
        <bm-marker v-for="(item, index) in state.list" :key="index" :point="item.point"
          animation="BMAP_ANIMATION_BOUNCE">
          <bm-label :position="item.point" :content="item.address" :offset="[20, -32]"
            :styles="{ color: '', fontSize: '16px', padding: '10px 20px', borderColor: '#ccc' }"></bm-label>
        </bm-marker>
      </baidu-map>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.map-wrapper {
  min-width: 1440px;

  .title {
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 40px;

    .item {
      padding: 0 50px;
      cursor: pointer;

      &.active {
        color: #000;
      }

      &:not(:first-child) {
        border-left: solid 1px #626675;
      }
    }
  }

  .map {
    width: 100%;
    height: 200px;
  }
}
</style>